<template>
	<view class="app">
		<!-- 页面内容开始 -->
		<view class="list-page">

			<!--头部开始 -->
			<view class="list-head">
				<view style="text-align: center;padding: 20rpx;background-color: #f8f8fa;" v-if="options.title">
					{{ options.title }}
				</view>
				<!-- 状态筛选 -->
				<view class="subsection">
					<u-subsection :list="subsection1.list" :current="subsection1.current" :button-color="subsection1.list[subsection1.current].color"
						active-color="#ffffff" bg-color="#ffffff" @change="sectionChange1"></u-subsection>
				</view>
				<!-- 总记录数 -->
				<view class="total-desc"> 共 <text class="total-num">{{ data.total }}</text> 条记录 </view>
			</view>
			<!--头部结束 -->

			<!--无内容时 -->
			<view v-if="data.list.length == 0" style="padding: 40% 0 80% 0;">
				<u-empty v-if="loading" text="查询中..." mode="search"></u-empty>
				<u-empty v-else text="暂无内容" mode="list"></u-empty>
			</view>
			<!--有内容时开始-->
			<view v-else class="list-main">
				<block v-for="(item, index) in data.list" :key="index">
					<!-- ****************** 自定义item的内容开始 ****************** -->

					<view class="list-item" v-if="queryForm1.formData.mode === 1">
						<view class="content" @click.stop="itemClick(item)">
							<image :src="item.image" style="width: 80rpx;height: 80rpx;margin-right: 20rpx;" mode="aspectFill"></image>
							<view class="left">
								<text>{{ item.goods_name }}</text>
								<text class="time" v-if="item.sku_name">{{ item.sku_name }}</text>
							</view>
							<view class="right">
								<text>X {{ item.calc_num }}</text>
								<text class="balance" style="font-size: 24rpx;">金额：{{ vk.pubfn.priceFilter(item.calc_goods_payment_amount) }}</text>
							</view>
							<!-- 右侧的箭头，如果有点击事件，则打开注释 -->
							<!-- <u-icon name="arrow-right" color="#999999" class="arrow-right"></u-icon> -->
						</view>

					</view>
					<view class="list-item" v-else>
						<view class="content" @click.stop="itemClick(item)">
							<view class="left">
								<text>{{ item.title || "【标题】" }}</text>
								<text class="time">{{ $fn.timeFormat(item.pay_time) }}</text>
							</view>
							<view class="right">
								<text :class="{
									green:valueFn(item) >= 0,
									red:valueFn(item) < 0,
								}">{{ valueFilter(item) }}</text>
							</view>
							<!-- 右侧的箭头，如果有点击事件，则打开注释 -->
							<!-- <u-icon name="arrow-right" color="#999999" class="arrow-right"></u-icon> -->
						</view>
					</view>

					<!-- ****************** 自定义item的内容结束 ****************** -->
				</block>
				<!-- 加载更多-->
				<u-loadmore :status="state.loadmore" bg-color="var(--bgcolor)" margin-bottom="30" @loadmore="nextPage" />
			</view>
			<!--有内容时结束-->
		</view>

		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
	</view>
</template>

<script>
var vk = uni.vk;			// vk依赖
var originalForms = {}; // 表单初始化数据
export default {
	data() {
		// 页面数据变量
		return {
			// 获取list数据的云函数请求路径
			url: "client/salesman.getPerformanceRecord",
			// init请求返回的数据
			data: {
				list: [],
				total: "-",
				hasMore: true // 是否还有下一页数据
			},
			// 列表查询请求数据
			queryForm1: {
				// 分页数据
				pagination: {
					pageIndex: 1, //当前页码
					pageSize: 20 //每页显示数量
				},
				// 查询表单数据源，可在此设置默认值
				formData: {
					pay_time:[],
					mode:0
				},
				// 查询匹配规则 fieldName:指定数据库字段名,不填默认等于key
				columns: [
					{ key: "pay_time", mode: "[]" },
				],
				// 排序规则
				sortRule: [
					//{ name:"calc_goods_payment_amount", type:"desc" }, // desc降序 asc升序
				]
			},
			// 头部状态选择
			subsection1: {
				key: "mode", // 查询字段名
				current: 0, // 当前选中的索引
				list: [
					{ name: "商品明细", value: 0, color: "var(--main)" },
					{ name: "商品统计", value: 1, color: "var(--main)" },
				]
			},
			// 页面状态
			state: {
				loadmore: "loading", // loadmore的显示状态
			},
			loading: false, // 是否请求中
			scrollTop: 0, // 滚动条当前位置
			options:{}
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		vk = uni.vk;
		this.options = options;
		this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {

	},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 页面每次【卸载时】（一般用于取消页面上的监听器）
	onUnload(){},
	// 监听 - 页面下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	// 监听 - 页面触底部
	onReachBottom() {
		this.nextPage();
	},
	// 监听 - 点击右上角转发时 https://uniapp.dcloud.io/api/plugins/share.html#onshareappmessage
	onShareAppMessage(options) {

	},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options={}) {
			let that = this;
			console.log("init: ", options);
			if (vk.pubfn.isNotNull(options.type)) {
				that.queryForm1.formData.type = Number(options.type);
			}
			if (vk.pubfn.isNotNullAll(options.startTime, options.endTime)){
				that.queryForm1.formData.pay_time = [Number(options.startTime), Number(options.endTime)];
			}
			vk.pubfn.objectAssign(that.queryForm1.formData, options);
			originalForms["queryForm1"] = vk.pubfn.copyObject(that.queryForm1.formData);

			// 查询
			that.search();
		},
		// 搜索查询
		search(e) {
			let that = this;
			that.data.list = [];
			that.queryForm1.pagination.pageIndex = 1;
			that.data.pageKey = true;
			that.getList();
		},
		// 加载下一页数据
		nextPage() {
			let that = this;
			if (that.state.loadmore == "loadmore") {
				that.state.loadmore = "loading";
				that.queryForm1.pagination.pageIndex++;
				that.getList();
			}
		},
		// 获取list数据
		getList(obj = {}) {
			let that = this;
			vk.pubfn.getListData2({
				that: that,
				url: that.url,
				success: obj.success
			});
		},
		itemClick(item){

		},
		valueFn(item){
			let {
				goods_payment_amount = 0,
				refund_goods_payment_amount = 0
			} = item.amount;
			return goods_payment_amount + refund_goods_payment_amount;
		},
		valueFilter(item){
			let value = this.valueFn(item);
			let newValue = vk.pubfn.priceFilter(value);
			return value > 0 ? `+${newValue}` : newValue;
		},
		sectionChange1(index, search=true) {
			let that = this;
			if (index < 0) {
				return false;
			}
			that.subsection1.current = index;
			if (index === 0) {
				that.url = "client/salesman.getPerformanceRecord";
			} else {
				that.url = "client/salesman.getGoodsPerformanceRecord";
			}
			let key = that.subsection1.key;
			let value = that.subsection1.list[index].value;
			that.$set(that.queryForm1.formData, key, value);
			that.data.list = [];
			that.data.total = "-";
			// 搜索
			if (search) that.search();
		},
	},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
.app{
	--main: #4590f9;
	--secondary: rgba(41,121,255,0.13);
	--bgcolor: #f8f8fa;

	background-color: var(--bgcolor);
	min-height: calc(100vh - var(--window-top));
}

/* list主结构开始 */
.list-page {
	background-color: var(--bgcolor);

	/* 头部 */
	.list-head {
		.total-desc {
			font-size: 28rpx;
			color: #999;
			padding: 20rpx 30rpx 0rpx 30rpx;
			padding-bottom: 0;
			line-height: 52rpx;
			width: 100%;
		}

		.total-num {
			font-weight: bold;
			color: black;
			font-size: 26rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}

		.list-search {
			background-color: #ffffff;
			padding: 20rpx 30rpx;
		}
	}

	.list-main {
		padding: 0rpx 0rpx 20rpx 0rpx;
	}

}

/* list主结构结束 */


/* list-item开始 */
.list-item {
	margin: 20rpx;

	>.content {
		background-color: #ffffff;
		border-bottom: 2rpx solid #f3f3f3;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		> view {
			display: flex;
			flex-direction: column;
		}

		.text-one {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}

		>.left{
			flex: 1;
			text {
				color: #333333;
				&:nth-of-type(2) {
					margin: 6rpx 0rpx;
				}
			}

			.time {
				color: #999999;
				font-size: 24rpx;
			}
		}

		>.right {
			display: flex;
			justify-items: center;
			align-items: flex-end;
			.balance{
				color: #999999;
			}
			.gray{
				color: #9e9e9e;
				text-decoration: line-through;
			}
			.green{
				color: #6DCFA5;
			}
			.red{
				color: #fb4e4e;
			}
			.bold{
				font-weight: bold;
			}
		}
		>.arrow-right{
			margin-left: 20rpx;
		}
	}

}
/* list-item结束 */


</style>
